<template>
	<div class="main-company-data"> 
		<!-- <so-header :seller="headerTitle"></so-header> -->
    <setHeader :title="options.name" :back-fn="goback"></setHeader>
    <div class="suspension_content">
      <!-- 头部浮层 -->
      <div class="main-suspension"> 
        <div class="suspension-top"></div>
        <div class="suspension-info">
          <!-- 卡片头部-上 -->
          <div class="suspension-info-top clear">
            <dir class="create_company_img">
              <img :src="log_img" v-show="img_flag1">
              <img src="../common/images/youquan.png" v-show="img_flag2">
            </dir>
            <div class="suspension-info-top-center">
              <h2 @click="goIndex">{{options.name}}</h2>
              <p>{{options.description}}</p>
            </div>
            <div class="suspension-info-top-right" v-show="edit_show">
              <a href="javascript:void(0)" @click="circleUpdate()">
                  <i class="iconfont icon-transmit_icon icon_editor"></i>编辑
              </a>
            </div>
          </div>
          <!-- 卡片头部-下 -->
          <div class="suspension-circle-index-bottom visitors_bottom">
            <ul class="clear">
              <li >
                <span>{{Anum}}</span>
                <span>企业同事</span>
              </li>
              <li >
                <span>{{Pnum}}</span>
                <span>企业产品</span>
              </li>
              <li >
                <span>{{Nnum}}</span>
                <span>企业新闻</span>
              </li>
            </ul>
            <!-- <ul>
              <li>
                <span>{{options.visitors}}</span>
                <span>最近浏览</span>
              </li>
              <li>
                <span>{{options.view}}</span>
                <span>最近查看</span>
              </li>
            </ul> -->
          </div>
        </div>
      </div>
      <!-- 我的同事 -->
      <div class="main-myColl mycolleague_main">
          <div class="title_text_more">
            <h3>公司同事</h3>
            <a href="javascript:void(0)" @click="goColleague">更多<i class="iconfont icon-xiangyou"></i></a>
          </div>
          <div class="company_list">
              <ul class="clear">
                  <li class="fl" v-for="v in colleagueInfo.slice(0,5)" v-show="colleagueInfo_flag1" :key="v.id">
                      <div class="mycoll_right_img" @click="goCheckInfo(v.user_id)">
                        <img :src="v.userhead"/>
                      </div>                        
                  </li>
                  <li v-show="colleagueInfo_flag2" style="width: 100%; text-align: center;">
                      <span class="noData" style="font-size: 0.28rem;color: #999;">小主人，您还没添加同事呢~请赶紧添加吧!</span>                        
                  </li>
              </ul>
          </div>
      </div>
      <!-- 订单处理 
      <div class="main-orderMesg">
          <div class="title_text_more">
            <h3>订单处理</h3>
            <a href="javascript:void(0)">全部<i class="iconfont icon-xiangyou"></i></a>
          </div>
          <div class="coterie" style="padding: 0.2rem 0.2rem 0.3rem;">
              <ul>
                <li>
                    <img src="../common/images/pay.png" alt="">
                    <span>代付款</span>
                </li>
                <li>
                    <img src="../common/images/fa.png" alt="">
                    <span>代发货</span>
                </li>
                <li>
                    <img src="../common/images/shou.png" alt="">
                    <span>代收货</span>
                </li>
                <li>
                    <img src="../common/images/ping.png" alt="">
                    <span>评价</span>
                </li>
                <li>
                    <img src="../common/images/sh.png" alt="">
                    <span>退款/售后</span>
                </li>
              </ul>
          </div>  
      </div>-->
      <!-- 推广 -->
      <div class="main-navigater">
          <!-- <div class="main_menu">
              <label for=""><i class="iconfont icon-xingzhuang-tupian main_menu_icon"></i>智能海报</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div> -->
          <div class="main_menu"  @click="tagShow">
              <label for=""><i class="iconfont icon-guanwang main_menu_icon"></i>企业官网</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div>
          <div class="main_menu" @click="usercardClick()">
              <label for=""><i class="iconfont icon-mingpian2 main_menu_icon"></i>企业名片</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div>
          <div class="main_menu" @click="productmanageClick()">
              <label for=""><i class="iconfont icon-chanpin1 main_menu_icon"></i>企业产品</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div>
          <div class="main_menu" @click="newsmanageClick()">
              <label for=""><i class="iconfont icon-xinwen main_menu_icon"></i>企业新闻</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div>
          <!-- <div class="main_menu" @click="activitymanageClick()">
              <label for=""><i class="iconfont icon-huodong main_menu_icon"></i>企业活动</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div> -->
          <!-- <div class="main_menu">
              <label for=""><i class="iconfont icon-tuiguangguanli2 main_menu_icon"></i>企业推广</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div> -->
          <!-- <div class="main_menu" @click="companyTagClick()">
              <label for=""><i class="iconfont icon-biaoqian main_menu_icon"></i>标签管理</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div> -->
          <div class="main_menu" @click="companyOrganClick()">
              <label for=""><i class="iconfont icon-jiagou main_menu_icon"></i>企业架构</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div>
           <div class="main_menu" @click="inCompanyIndex()">
              <label for=""><i class="iconfont icon-zhuye main_menu_icon"></i>企业主页</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div>
      </div>
    </div>
    <so-footer></so-footer>

	
      <!-- 弹出框控制 -->
    <div class="dialog__wrap" v-show="stateShow">
            <transition name="background-fade" @after-leave="afterLeave">
              <div class="dialog__background" v-if="show"></div>
            </transition>
          <transition name="fade-move">
              <div class="dialog">
                  <div class="dialog__head">
                      <span class="dialog__head__title">
                          请输入官网域名<br />(例:http://www.iisp.com)
                      </span>
                      <i class="iconfont icon-cuo dialog__head__btn" @click="close"></i>
                  </div>
                  <div class="dialog__body">
                      <span>
                          <input type="text" :placeholder="placeholder" class="message_level" v-model="website">
                      </span>
                  </div>
                  <div class="dialog__footer">
                      <button class="dialogbtnner" @click="cancelt()" :disabled="pending">取消</button>
                      <button class="dialogbtnner" @click="dialogbtn()" :disabled="pending">完成</button>
                  </div>
              </div>
          </transition>
			</div>

	</div>
  
</template>

<script>
import setHeader from '../public/setHeader.vue';
import soFooter from '../components/footer-bar';
import { Indicator } from 'mint-ui';

  export default {
    data() {
      return {
        options: '',
        colleagueInfo: '',
        log_img: '',
        cpId: '',
        userInfo: '',
        flag: true,
        img_flag1: true,
        img_flag2: false,
        colleagueInfo_flag1: true,
        colleagueInfo_flag2: false,
        u_type:'',
        edit_show:false,
        Anum:'',
        Pnum:'',
        Nnum:'',
        /*moreOthers: [
            {
                link: '/smartPoster',
                otherName: '智能海报'
            },
            {
                link: '',
                otherName: '企业名片'
            },
            {
                link: '/productManage',
                otherName: '产品管理',
                otherLitter: ''
            },
            {
                link: '/newsManage',
                otherName: '新闻管理',
                otherLitter: ''
            },
            {
                link: '/activityManage',
                otherName: '活动管理',
                otherLitter: ''
            },
            {
                link: '',
                otherName: '推广管理'
            },
        ],*/
        suspens: [
          {
            susnum: '1987',
            enterprise: '企业活动'
          },
          {
            susnum: '1987',
            enterprise: '企业商品'
          },
          {
            susnum: '1987',
            enterprise: '企业动态'
          },
        ],

        //弹出框控制
				stateShow:false,
				pending: false,
				conttent:'',
				placeholder: '输入您的官网域名',
        show:false,

        website:'',
        access_token:'',
        
      };
    },
    components:{
    	setHeader,
      soFooter,
    },
    created() {
      let that = this;
      that.userInfo = window.localStorage.getItem('userInfo');
      that.access_token = window.localStorage.getItem('access_token');
      that.userInfo = JSON.parse(that.userInfo);
      that.cpId = that.$route.query.cpId;
      that.u_type = that.$route.query.u_type;
      if(that.u_type == 1){
        that.edit_show = true;
      }
      that.getCompanyInfo(that.cpId);
      that.getCompanyColleague(that.cpId);
    },
    mounted() {
      // let that = this;
      window.localStorage.setItem('cpId', this.$route.query.cpId);
      // var user = Promise.resolve(this.getUserInfo())
      // user.then(
      //   function (result) { 
      //   that.userInfo = result;
      //   that.getCompanyInfo(that.cpId);
      //   that.getCompanyColleague(that.cpId);
      // })
      // this.cpId = this.$route.query.cpId;
      // this.u_type = this.$route.query.u_type;
    },
    methods:{
       cancelt(){
         this.stateShow = false;
      },
      dialogbtn(){
        let that = this;
        if(that.website == null || that.website == ''){
          that.$openTips({
              text: '不能为空',
              time: 1000
          })
          return;
        }
        if(!/^((https|http|ftp|rtsp|mms){0,1}(:\/\/){0,1})www\.(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/.test(that.website)){
          that.$openTips({
            text: '请填写正确的网址',
            time: 1000
          })
          return;
          // 正则不是想要的需求，缺了http仍然可以编辑成功
        }
        if(that.options.website == that.website){
          that.$openTips({
              text: '当前官网地址重复',
              time: 1000
          })
          return;
        }
        that.$post(that.$path + '/index.php/api/company/weburl',{cpId:that.cpId,website:that.website,access_token:that.access_token}).then((response) => {
            console.log('编辑官网',response);
            if(response.code == 200){
                this.stateShow = false;
                this.show = false;
                that.$openTips({
                    text: '编辑成功',
                    time: 1000
                })
                that.getCompanyInfo(that.cpId);
            }else{
              this.stateShow = false;
              this.show = false;
              that.getCompanyInfo(that.cpId);
            }
        })
      },
      //点击添加标签显示弹出框
      tagShow(){
          this.website = this.options.website;
          console.log(56);
          this.show = true;
          this.stateShow = true;
      },
      // 关闭弹框
      afterLeave() {
        this.stateShow = false;
      },
      close() {
        this.show = false;
        this.stateShow = false;
      },


      goback() {
        window.history.back();
        // this.$router.push({ path: '/userCenter'});
      },
      getCompanyInfo(cp_id){
        this.$fetch(this.$path+ '/api.php/company/getCompanyInfo', {cp_id}).then((response) => {
          console.log('企业详情',response);
          if(response.data.uid != this.userInfo.id){
            this.flag = false
          }
          this.options = response.data
          this.Anum = response.data.act;
          this.Pnum = response.data.pro;
          this.Nnum = response.data.news;
          
            this.img_flag1 = false
            this.img_flag2 = true
          
        })
      },

      getCompanyColleague(cp_id){
          let access_token = this.access_token;
         this.$fetch(this.$path+ '/api.php/company/getNewCompanyColleague', {cp_id,access_token}).then((response) => {
           console.log('企业同事',response);
          if(response.code == 200){
            for(var i in response.data){
              // response.data[i]['userhead'] = this.$path+response.data[i]['userhead'];
            }
            this.colleagueInfo = response.data
          }else{
            this.colleagueInfo_flag1 = false
            this.colleagueInfo_flag2 = true
          }
        })
      },

      createCompany() {
        this.$router.push({path: '/companyCreate'})
        // this.$router.push({path: '/userCenter/circleindex', query: {circlename: circlename}}); 
      },
      updateCompany(){
        this.$router.push({path: '/companyUpdate', query: {cp_id: this.cpId}}); 
      },
      //点击企业名称进入企业首页
      goIndex(){
        if(this.$system != 'ios'){
          this.$router.push({path: '/userCenter/companyIndex', query: {cp_id:this.cpId}});
        }else{
          window.location.href = '/userCenter/companyIndex?cp_id=' + this.cpId;
        }       
      }, 
      //点击更多进入我的同事
      goColleague(){
        // location.reload();
        this.$router.push({path: '/userCenter/companyColleague', query: {cp_id:this.cpId,type:this.u_type}}); 
      },
      //点击同事头像查看同事资料
      goCheckInfo(lookUid){
        this.$router.push({path: '/colleagueInfo', query: {cp_id:this.cpId,lookUid:lookUid,checkFlag:this.u_type}});
      },
      // 点击进新闻管理
      newsmanageClick() {
        this.$router.push({path: '/userCenter/newsManage', query: {cp_id:this.cpId,u_type:this.u_type}}); 
      },
      // 点击进活动管理
      // activitymanageClick() {
      //   this.$router.push({path: '/userCenter/activityManage', query: {cp_id:this.cpId,u_type:this.u_type}}); 
      // },
      //点击进产品管理
      productmanageClick() {
        this.$router.push({path: '/userCenter/productManage', query: {cp_id:this.cpId,u_type:this.u_type}}); 
      },
      //点击进入企业名片
      usercardClick() {
        this.$router.push({path: '/UserCard', query: {targetFlag:'mycolleague',c_id:this.cpId}});
      },
      //企业编辑进入编辑页面
      circleUpdate() {
        this.$router.push({path: '/userCenter/companyEditor', query: {cp_id:this.cpId}});
      },
      //企业组织架构
      companyOrganClick() {
        this.$router.push({path: '/userCenter/companyDepart', query: {cp_id:this.cpId}});
      },
      //点击进入企业主页
      inCompanyIndex(){
        if(this.$system != 'ios'){
          this.$router.push({path: '/userCenter/companyIndex', query: {cp_id:this.cpId}});
        }else{
          window.location.href = '/userCenter/companyIndex?cp_id=' + this.cpId;
        }       
      },
      // //点击编辑企业标签
      // companyTagClick(){
      //   this.$router.push({path: '/companyTag', query: {cp_id:this.cpId}});
      // },
    }
  }
</script>
<style >
@import '../common/css/userCenter.css';
@import '../common/css/companyData.css';
.suspension-company-data-bottom ul li{
	float:left;
	width:50%;
}
.suspension-info-top-center p{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 卡片底部 */
.visitors_bottom {
  border-top: 1px solid #f3f3f3;
  padding-top: 0.3rem;
}
.visitors_bottom ul>li{
  width: 50%;
}

/* 头部创建企业 */
.main-company-data .mint-button-text {
  font-size: 0.3rem;
}
.mycolleague_main .mycoll_right_img {
  width: 1rem;
  height: 1rem;
  text-align: center;
  vertical-align: middle;
}
.mycolleague_main .mycoll_right_img img {
  border-radius: 50%;
}
    

</style>


<style lang="scss" scoped>
//添加同级和下级弹框
.dialog {
  width: 6rem;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: #fff;
  font-size: 0.32rem;
  z-index: 10;
  &__wrap {
  }
  &__background {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
  }
  &__head {
    padding: 0.2rem 0.3rem;
    line-height: 1;
    &__title {
      line-height: 1;
      font-size: 0.28rem;
      color: #333;
    }
    &__btn {
      line-height: 1;
      float: right;
      font-size: 0.28rem;
      color: #999;
      // -webkit-text-stroke-width: 0.02rem;   //加粗字体图标
    }
  }
  &__body {
    padding: 0.1rem 0;
    color: #666;
    font-size: 0.28rem;
    white-space: normal;
    word-break: break-all;
    span {
      display: block;
      font-size: 0.24rem;
      color: #333;
      height: 0.66rem;
      line-height: 0.66rem;
      label {
        height: 0.66rem;
        line-height: 0.66rem;
        display: inline-block;
      }
      input {
          padding: 0 0.04rem;
          border: 0;
          outline: none;
          height: 0.66rem;
          line-height: 0.66rem;
          border-bottom: 1px solid #d8d8d8;
      }
    }
  }
  &__footer {
	font-size: 0;
  line-height: 1;
  padding: 0.2rem 0;
    .dialogbtnner {
		    font-size: .22rem;
        background-color: #e50838;
        border-top: 1px solid #e50838;
        width: 1rem;
        padding: .08rem 0;
        color: #fff;
        border-radius: 4px;
        margin: 0 0.1rem;
    }
    .dialogbtnner:first-child {
      background-color: #fff;
      color: #e50838;
      border: 1px solid #e50838;
    }
  }
}
.background-fade {
  &-enter {
    opacity: 0;
  }
  &-enter-active {
    transition: opacity 0.2s;
  }
  &-enter-top {
    opacity: 1;
  }
  &-leave {
    opacity: 1;
  }
  &-leave-active {
    transition: opacity 0.2s;
    opacity: 0;
  }
}
.fade-move {
  &-enter {
    opacity: 0.6;
    top: 45%;
  }
  &-enter-active {
    transition: top 0.4s ease-in-out, opacity 0.4s ease-in-out;
  }
  &-enter-to {
    opacity: 1;
    top: 50%;
  }
  &-leave {
  }
  &-leave-active {
  }
  &-leave-to {
  }
}

</style>
